<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>交互式学习录播器</title>


    </style>

	</head>



	<style>
		/* 头部样式 */
		
		.header {
			background-image: linear-gradient(#000000);
			padding: 4px;
			text-align: center;
		}
		/* 导航条 */
		
		.topnav {
			overflow: hidden;
			background-color: #000000;
		}
		/* 导航链接 */
		
		.topnav a {
			float: left;
			display: block;
			color: #f2f2f2;
			text-align: center;
			padding: 20px 60px;
			text-decoration: none;
		}
		/* 链接 - 修改颜色 */
		
		.topnav a:hover {
			background-color: green;
			color: black;
		}
		/* 创建三个不相等的列 */
		
		.column {
			float: left;
			padding: 10px;
		}
		/*左侧*/
		
		.leftcolumn {
			text-align: center;
			padding-left: 4px;
			float: left;
			width: 15%;
		}
		/* 中间区域宽度 */
		
		.column.middle {
			width: 70%;
		}
		/*右侧*/
		
		.rightcolumn {
			font-size: 18px;
			padding-right: 30px;
			float: right;
			width: 10%;
			text-align: center;
		}
		/* 列后面清除浮动 */
		
		.row:after {
			content: "";
			display: table;
			clear: both;
		}
		/* 响应式布局 - 宽度小于600px时设置上下布局 */
		
		@media screen and (max-width: 600px) {
			.column.side,
			.column.middle {
				width: 100%;
			}
		}
		/* 底部样式 */
		
		.footer {
			font-size: 20px;
			padding: 2px;
			text-align: center;
			background-color: #909090;
		}
		/*	左侧导航栏*/
		
		ul {
			list-style-type: none;
			margin: 0;
			padding: 0;
			background-color: #f1f1f1;
			text-align: center;
		}
		
		li a {
			display: block;
			color: #000;
			padding: 6% 10%;
			text-decoration: none;
		}
		/*左侧导航栏,鼠标移动到选项上修改背景颜色 */
		
		li a:hover {
			background-color: #555;
			color: white;
		}
		
		button {
			background-color: darkcyan;
			display: inline-block;
			padding: 5px 15px;
			font-size: 30px;
			cursor: pointer;
			text-align: center;
			text-decoration: none;
			outline: none;
			color: #ff6347;
			border: none;
			border-radius: 15px;
			box-shadow: 0 9px #999;
			margin-right: 25px;
		}
		
		button:hover {
			background-color: darkgrey;
			color: black;
		}
		
		button:active {
			background-color: darkgrey;
			box-shadow: 0 5px #666;
			transform: translateY(4px);
		}
		
		body {
			background-color: #D3D3D3;
		}
		
		h1 {
			font-size: 50px;
			text-shadow: 2px 2px 2px #000;
		}
		
		h2 {
			text-align: center;
			text-shadow: 2px 2px 2px #9ACD32;
		}
		
		h3 {
			text-shadow: 2px 2px 2px tomato;
		}
		
		video {
			width: 70%;
			height: 350px;
		}
		/*弹窗*/
		
		#d1 {
			border-radius: 5px;
			width: 400px;
			height: 300px;
			z-index: 2;
			position: fixed;
			top: 50%;
			left: 50%;
			margin-left: -200px;
			margin-top: -150px;
			overflow: hidden;
			display: none;
			background-color: white;
			color: black;
		}
		
		#d2 {
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background-color: grey;
			z-index: 1;
			opacity: 0.8;
			display: none;
		}
		
		#number {
			display: block;
			width: 90%;
			height: 30px;
			margin: 10px auto 30px auto;
			border: solid 1px #248CD6;
			border-radius: 5px;
			outline: none;
			text-indent: 10px;
		}
		
		#number:focus {
			border: solid 1px #248CD6;
			border-radius: 5px;
			box-shadow: 0 0 8px #248CD6;
		}
		
		.tc .submit {
			display: flex;
			width: 90%;
			height: 40px;
			margin: 20px auto;
		}
		
		.tc .cancel,
		.confirm {
			flex: 1;
			margin: 3px;
			border: none;
			transition: all 0.2s;
		}
		
		.tc .cancel:hover,
		.confirm:hover {
			background-color: cyan;
			display: inline-block;
			padding: 5px 15px;
			font-size: 18px;
			cursor: pointer;
			text-align: center;
			text-decoration: none;
			outline: none;
			color: #fff;
			border: none;
			border-radius: 15px;
			box-shadow: 0 9px #999;
			margin-right: 25px;
		}
		
		.tc .top a {
			font-size: 20px;
			float: right;
			margin-right: 2px;
			text-decoration: none;
			color: #3A3C3D;
			opacity: 0.8;
		}
		
		.tc .top a:hover {
			opacity: 1;
		}
		
		.xstw {
			line-height: 35px;
			margin-top: 25px;
		}
		
		.xstw input {
			width: 125px;
			height: 35px;
			/*margin: 0 50px;*/
			border-radius: 25px;
			border: 1px solid #DBDBDB;
			outline: none;
			background-color: #4d99fd;
		}
		
		.tc_tit {
			padding: 0 16px;
			color: #3A3C3D;
			/*opacity: 0.7;*/
			text-align: left;
			height: 40px;
			line-height: 40px;
			/* width: 100%; */
		}
		
		.tc_tit a {
			height: 40px;
			line-height: 40px;
		}
		
		.question {
			text-align: left;
			text-indent: 20px;
			padding-bottom: 20px;
		}
	</style>

	<body>
		<div class="header">
			<h1>交互式学习录播器</h1>
		</div>
		<div class="topnav">
			<font size="5">
				<a href="https://www.w3school.com.cn">W3school</a>
				<a href="https://www.csdn.net">CSDN</a>
				<a href="https://www.imooc.com">慕课网</a>
				<a href="http://www.neea.edu.cn">中国教育考试网</a>
				<a href="https://www.51zxw.net">我要自学网</a>
				<a href="https://www.baidu.com">百度搜索</a>
			</font>
		</div>

		<div class="row">
			<!--左侧 -->
			<div class="leftcolumn">
				<br /><br />
				<font size="4">
					<h1> 课程表 </h1>
                      
					<div style="display:block" class="menu_nva">
						<ul>
							<li>
								<a href="https://www.w3school.com.cn/html/index.asp">HTML教程</a>
							</li>
							<li>
								<a href="https://ask.csdn.net">问答</a>
							</li>
							<li>
								<a href="https://coding.imooc.com/?c=photo">UI设计&多媒体</a>
							</li>
							<li>
								<a href="http://ncre.neea.edu.cn/html1/category/1507/899-1.htm">大纲教材</a>
							</li>
							<li>
								<a href="https://www.51zxw.net/List.aspx?cid=14">室内设计</a>
							</li>
							<li>
								<a href="https://baijiahao.baidu.com/s?id=1609931237468518664&wfr=spider&for=pc">自学网站搜索</a>
							</li>
							</div>
				</font>
			</div>
							
				<!--  中间    -->
			<div class="column middle" controls style="text-align: center;">
				<br /><br />

				<div>
					<button onclick="playPause()">播放/暂停</button>
					<button type="submit" id="login-up" onclick="skip()">录音问答</button>

					<button type="submit" id="login-up" onclick="skip1()">文本问答</button>

					<button onclick="spwd()">视频问答</button>
					<button onclick="disp_prompt()">关于</button>

				</div>
				<br />
				<div>
					<video controls id="videos" autoplay="autoplay" >
            <source src="mv.mp4" /><br />
        </video>

					<h3>Your browser does not support HTML5 video.</h3>

				</div>

<!--弹窗-->
				<div class="tc">
					<div id="d2"></div>
					<div id="d1">
						<div class="top">
							<div class="tc_tit">
								<!--<span class="xstwtc"></span>-->
								<a href="javascript:void(0)" onclick="closes()">&#935;</a>
							</div>
							<div class="question">观看视频的过程中，你有什么疑问吗？</div>
							<div class="question">你对该学习内容有了什么认识？</div>
						</div>
						<input type="text" class="number" placeholder="请输入" id="number">
						<div class="submit">
							<button2 class="cancel" onclick="cancel()">取消</button2>
							<button2 class="confirm" onclick="confirm()">确定</button2>
							<br />
						</div>
					</div>
				</div>
			</div>

			<!--右侧-->
			<div class="rightcolumn">
				<br /><br />
				<font size="6">
					<p id="demo"></p>
				</font>
				<p>学海无涯！</p>
			</div>

		</div>

		<!--底部-->
		<div class="footer">
			<h1>你的能量超乎你想象！</h1>
		</div>
	</body>

<script>
		//	关于	
		function disp_prompt() {
			alert("这不是一个普通的网站，而是进步的阶梯！");
		}

		//	视频问答
		function spwd() {
			var y;
	var vedio=prompt("请输入你的视频");
	if (vedio!=null &&vedio!=""){
	    x="你的问题是： " +vedio ;
	 document.getElementById("dem").innerHTML=y;
	}
		}

		//	录音问答
		function skip() {
			window.location.href = "luyin.html";
		}
      
      //文本问答
		function skip1() {
			var x;
	var person=prompt("请输入你的问题");
	if (person!=null && person!=""){
	    x="你的问题是： " + person ;
	    document.getElementById("demo").innerHTML=x;
	}
		}

		//	右侧时钟
		var myVar = setInterval(function() {
			myTimer()
		}, 100);

		function myTimer() {
			var d = new Date();
			var t = d.toLocaleTimeString();
			document.getElementById("demo").innerHTML = t;
		}

		// 视频播放/暂停
		var myVideo = document.getElementById("videos");

		function playPause() {
			if(myVideo.paused)
				myVideo.play();
			else
				myVideo.pause();
		}

		//          弹窗
		var setInter = 0;
		main();

		function main() {
			setInter = setInterval(function() {
				var vid = document.getElementById("videos");
				var currentTime = vid.currentTime.toFixed(1);
				console.log("时间" + currentTime);
				if(currentTime > 5) {
					chickMe();
				}

				if(currentTime > 10) {
					chickMe();
				}

			}, 1500);
		}

		function chickMe() {
			videos.pause();
			let d2 = document.getElementById("d2");
			d2.style.display = "block";
			let d1 = document.getElementById("d1");
			d1.style.display = "block";
		}

		function cancel() {
			videos.pause();
			let d2 = document.getElementById("d2");
			d2.style.display = "none";
			let d1 = document.getElementById("d1");
			d1.style.display = "none";
			clearInterval(setInter);
			console.log("您点击了取消");
		}

		function confirm() {
			console.log("您点击了确定");
			let d2 = document.getElementById("d2");
			d2.style.display = "none";
			let d1 = document.getElementById("d1");
			d1.style.display = "none";
			videos.play();
			clearInterval(setInter);
		}

		function closes() {
			videos.pause();
			let d2 = document.getElementById("d2");
			d2.style.display = "none";
			let d1 = document.getElementById("d1");
			d1.style.display = "none";
			console.log("点击关闭");
		}

		function stu_ques() {
			videos.pause();
			let d2 = document.getElementById("d2");
			d2.style.display = "block";
			let d1 = document.getElementById("d1");
			d1.style.display = "block";
		}
	</script>

	

</div>

</html>

	